<template>
  <div class="classBox">
    <main><router-view /></main>
    <footer>
      <van-tabbar route>
        <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item replace to="/flathunting" icon="qr-invalid"
          >找房</van-tabbar-item
        >
        <van-tabbar-item replace to="/issue" icon="add-o">发布</van-tabbar-item>
        <van-tabbar-item replace to="/information" icon="other-pay"
          >消息</van-tabbar-item
        >
        <van-tabbar-item replace to="/my" icon="contact">我的</van-tabbar-item>
      </van-tabbar>
    </footer>
  </div>
</template>
<script setup lang="ts">
import { onMounted, watch } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
onMounted(() => {
  document.title = route.meta.title as string;
  watch(route, () => {
    document.title = route.meta.title as string;
  });
});
</script>
<style scoped>
.van-tabbar-item--active {
  color: #ff3d00;
}
.classBox {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.classBox > main {
  flex: 1;
}
.classBox > footer {
  height: 50px;
  flex-shrink: 0;
}
</style>
